<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        ul{
            /* 清除浮动塌陷 */
            overflow: hidden;
        }
        li{
            float: left;
            width:120px;
            text-align: center;
            height: 30px;
            /* 垂直居中 */
            line-height: 30px;
            cursor: pointer;
        }
        div{
            width: 400px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            
            /* 隐藏标签 */
            display: none;
        }
        /* 
        交集选择器 标签名需要为li 、
        类名需要为current */
        li.current{
            background:pink;
            color:blue;
        }
        div.current{
            /* 显示标签 */
            display: block;
        }
        img{
            width: 400px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="current">图片</li>
        <li>动物</li>
        <li>食物</li>
        <li>风景</li>
    </ul>
    <section>
        <div class="current"><img src="images/pic1.png" alt=""></div>
        <div><img src="images/pic2.png" alt=""></div>
        <div><img src="images/pic3.png" alt=""></div>
        <div><img src="images/pic4.jpg" alt=""></div>
    </section>

    <script>
        // 通过标签名获取标签
        var tags=document.getElementsByTagName('li');
        var boxs=document.getElementsByTagName('div');
        // 遍历所有的标签
        for(var i=0;i<tags.length;i++){
            // 自定义标签属性 给每一个li增加一个属性index
            tags[i].index=i;
            // 绑定点击事件
            tags[i].onclick=function(){
                // 排他
                for(var j=0;j<tags.length;j++){
                    tags[j].className=''
                    boxs[j].className=''
                }
                // 当前用户点击的增加类
                this.className='current';
                // 获取属性
                var n=this.index;
                boxs[n].className='current'
            }
        }
    </script>
</body>
</html>